<template>
  <div class="container">
    <div class="row">
      <div class="col-12" v-for="(item, index) in allData" :key="index">
        <div class="img-header" id="img-header">
          <div class="image-name" style="position:absolute; z-index: 9999">
            <p class="img_name"> {{ item.title }}</p>
          </div>
          <div class="images">
            <img :src.sync="TopUrl" width="100%" height="100%">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="title-content">
          <div class="col-12">
            <div class="content-text">
              <h3 class="text-center info-title-title">营养美味留住新鲜</h3>
              <p class="doc-content">
                海鲜有利于降血脂。科学家发现，爱斯基摩人较少患心血管疾病，
                这与他们的主要食物来自深海鱼类有关。这些鱼类含有丰富的多价不饱和脂肪酸，
                可以降低甘油酸酯和低密度脂蛋白胆固醇。减少心血管疾病。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="info-title">
          <img :src.sync="assUrl" width="100%" height="100%">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="img-body">
          <div class="col-11">
            <div class="frozen-content" v-for="(item, index) in allData" :key="index">
              <h5>{{ item.title }}<br/></h5>
              <span v-show="item.place_of_origin_bf === true">产地：{{ item.place_of_origin }}<br/></span>
              <span v-show="item.specification_bf === true">规格：{{ item.specification }}<br/></span>
              <span v-show="item.content_bf === true">介绍：{{ item.content}}<br/></span>
              <div v-show="item.step_bf === true">
                制作方法：
                <div v-html="item.step" style="margin-right: 5px">
                  {{ item.step }}
                </div>
                <br/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getfrozen } from '../../api/api'

export default {
  name: 'frozen',
  data () {
    return {
      allData: '',
      winerys: null,
      idtId: null,
      ids: 1,
      baseUrl: process.env.BASE_URL,
      title_height: 0
    }
  },
  computed: {
    /**
     * @return {string}
     */
    TopUrl () {
      return `${this.baseUrl}img/frozen/frozen-logo.png`
    },
    assUrl () {
      return `${this.baseUrl}img/frozen/frozen-header.png`
    }
  },
  methods: {
    getOneRedWine () {
      getfrozen({
        id: this.$route.params.id
      }).then((response) => {
        this.allData = response.data
      })
    }
  },
  created () {
    this.getOneRedWine()
  }
}
</script>

<style scoped>
  .frozen-content {
    padding-top: 5px;
    color: #a9704f;
    width: 87%;
    margin: auto;
  }

  .img_name {
    margin: 185px 0 0 20px;
    padding: 0px;
    color: #fff;
  }

  .content-text {
    margin: 0 0.1em 0 0.1em;
    background-color: #FDF6EC;
  }

  .content-text h3 {
    color: #a9704f;
  }

  .info-title {
    padding: 0;
  }

  .info-title-title {
    padding-top: 15px;
    padding-bottom: 5px;
    margin: 0;
  }

  .doc-content {
    color: #a9704f;
    width: 90%;
    margin: auto;
    padding-bottom: 5px;
    text-indent:2em;
  }

  .img-body {
    background-color: #fef9ef;
  }
</style>
